<template>
  <div class="study-page page">
    <nav-bar title="学习园地" theme="red" message></nav-bar>
    <div class="study-main">
      <div class="study-main-top">
        <van-sticky :offset-top="44">
          <van-tabs v-model="searchForm.learnType" color="#C92420" title-active-color="#C92420" @change="tabChange">
            <van-tab v-for="(item, key) in tabList" :key="key" :title="item.description" :name="item.code"></van-tab>
          </van-tabs>
        </van-sticky>
        <div class="notice-division"></div>
        <van-sticky :offset-top="94">
          <van-tabs v-model="searchForm.childLearnType" line-height="0" swipe-threshold="3" @change="handleChangeType">
            <van-tab v-for="(item, key) in typeList" :key="key" :name="item.code">
              <template #title>
                <van-tag
                  v-if="searchForm.childLearnType === item.code"
                  type="danger"
                  round
                  plain
                  size="large"
                  style="background-color: rgba(201, 36, 32, 0.1)"
                >
                  {{ item.description }}
                </van-tag>
                <van-tag v-else round size="large" text-color="rgba(0, 0, 0, 0.78)" color="#f6f6f6">
                  {{ item.description }}
                </van-tag>
              </template>
            </van-tab>
          </van-tabs>
        </van-sticky>
        <div class="notice-division"></div>
      </div>
      <van-sticky class="page-scroll" :offset-top="140">
        <van-pull-refresh v-model="refreshing" style="min-height: 100%" @refresh="getList(1)">
          <template v-if="listData.length">
            <van-list
              v-model="loading"
              :finished="finished"
              :immediate-check="false"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              finished-text="没有更多了~"
              @load="getList"
            >
              <ul class="study-main-list">
                <li
                  class="study-main-item"
                  :class="{ 'study-main-item-active': index === curIdx }"
                  v-for="(item, index) in listData"
                  :key="index"
                  @click="studyClick(item, index)"
                >
                  <img
                    class="article-label"
                    :src="
                      require(`@/assets/images/partyBuilding/article-label${index === curIdx ? '-active' : ''}@2x.png`)
                    "
                    alt=""
                  />
                  <p class="article-title">{{ item.title }}</p>
                </li>
              </ul>
            </van-list>
          </template>
          <template v-else>
            <van-empty
              :image="require('@/assets/images/basic/pic_no_content.png')"
              description="暂无内容~"
              style="height: 300px"
            />
          </template>
        </van-pull-refresh>
      </van-sticky>
    </div>
  </div>
</template>

<script>
import Public from '@/api/public'
import List from '@/mixins/list'
import partyBuilding from '@/api/partyBuilding'
export default {
  mixins: [List],
  data() {
    return {
      api: partyBuilding.Study,
      curIdx: 0,
      searchForm: {
        learnType: '',
        childLearnType: '',
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10
      },
      tabList: [],
      typeLists: [[], [], []],
      typeList: [],
      listData: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    tabChange(val) {
      this.searchForm.learnType = val
      this.typeList = this.typeLists[val]
      this.searchForm.childLearnType = this.typeList[0].code
      this.listData = []
      this.getList()
    },
    handleChangeType(code) {
      this.searchForm.childLearnType = code
      this.listData = []
      this.getList()
    },
    studyClick(item, index) {
      this.curIdx = index
      this.$router.push('/partyBuilding/Study/detail?code=' + item.code + '&learnType=' + this.searchForm.learnType)
    },
    // 党建学习字典项
    init() {
      Public.Init.init({
        type: 'partyLearnTab,twoLearnType,threeSessionsType'
      }).then(res => {
        const { data } = res.data
        this.tabList = data.partyLearnTab.filter(o => o.code === '1' || o.code === '2')
        this.searchForm.learnType = this.tabList[0].code
        this.searchForm.childLearnType = data.twoLearnType[0].code
        this.typeLists[1] = data.twoLearnType
        this.typeLists[2] = data.threeSessionsType
        this.typeList = this.typeLists[this.searchForm.learnType]
        this.getList()
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/style/notice/list.less';
@import '~@/assets/style/partyBuilding/Study/index.less';
</style>
